import React from 'react'
import {
    Form, Input, Button, Checkbox, message, Tabs, Row, Col
} from 'antd';
import { useSelector, useDispatch } from 'umi'
import { UserOutlined, LockOutlined, PhoneOutlined, MessageOutlined } from '@ant-design/icons';
import styles from './index.less'
import storageUtils from "../../utils/storageUtils"
const { TabPane } = Tabs;
export default function index(props) {
    const dispatch = useDispatch()
    const onFinish = (values) => {
        dispatch({
            type: 'login/getTokens',
            payload: `username=${values.username}&password=${values.password}`
        })
        props.history.push('/home')
    };
    // const { token } = useSelector((state) => {
    //     return {
    //         token: state.login.token
    //     }
    // })

    // 自定义校验密码
    const validatorPwd = (rule, value, callback) => {
        if (!value) {
            callback("密码不能为空")
        } else if (value.length < 6) {
            callback("密码的长度必须大于6位")
        } else {
            // 验证通过
            callback()
        }
    }
    //标签页
    const Demo = () => (
        <Tabs defaultActiveKey="1" centered>
            <TabPane tab="账户密码登录" key="1">
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    style={{ margin: '150px auto', width: "30%" }}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '用户名不能为空!',
                            },
                            {
                                min: 2,
                                message: '用户名必须长度必须大于2',
                            },
                            {
                                max: 10,
                                message: '用户名必须长度必须小于10',
                            },
                            {
                                pattern: /^[a-z-A-Z0-9_\u4E00-\u9FA5]+$/,
                                message: '用户名必须是字母.数字和汉字',
                            }
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                validator: validatorPwd
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"

                        />
                    </Form.Item>


                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>

                    </Form.Item>
                </Form>
            </TabPane>
            <TabPane tab="手机号登录" key="2">
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    style={{ margin: '150px auto', width: "30%" }}
                >
                    <Form.Item
                        name="phone"

                        rules={[
                            {
                                required: true,
                                message: 'Please input your phone number!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<PhoneOutlined className="site-form-item-icon" />}
                            style={{
                                width: '100%',
                            }}
                        />
                    </Form.Item>
                    <Form.Item extra="We must make sure that your are a human.">
                        <Row gutter={8}>
                            <Col span={17}>
                                <Form.Item
                                    name="captcha"
                                    noStyle
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input the captcha you got!',
                                        },
                                    ]}
                                >
                                    <Input
                                        prefix={< MessageOutlined className="site-form-item-icon" />}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={4}>
                                <Button>短信验证码</Button>
                            </Col>
                        </Row>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>

                    </Form.Item>
                </Form>
            </TabPane>
        </Tabs>
    );
    return (
        <div className={styles.container}>
            <Demo />
            {/* <div>
                <img src={require("../../assets/images/logo.png").default} alt="" />
                <span>赤兔养车</span>
            </div>
            <div className='form-text'>
               
            </div> */}
        </div>
    )
}
